<template>
	<view class="wrap">
		<nav-bar></nav-bar>
		<view :style="'margin-top:'+(menuButtonBottom+30)+'rpx;'">
			<view class="ad-swiper">
				<u-swiper :list="initialize.ads" :title="false"
				indicator-pos="bottomCenter" mode="round" :interval="3000"></u-swiper>
			</view>
			<view class="block-wrap">
				<u-grid :col="4" :border="false" @click="gridJump">
					<u-grid-item index="0">
						<image class="gn-icon" src="/static/camera.png"></image>
						<view class="grid-text">摄影约拍</view>
					</u-grid-item>
					<u-grid-item index="1">
						<image class="gn-icon" src="/static/picture-album.png"></image>
						<view class="grid-text">相册作品</view>
					</u-grid-item>
					<u-grid-item index="2">
						<image class="gn-icon" src="/static/map-draw.png"></image>
						<view class="grid-text">拍摄场地</view>
					</u-grid-item>
					<u-grid-item index="3">
						<image class="gn-icon" src="/static/mark.png"></image>
						<view class="grid-text">摄影活动</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<!-- swiper -->
		<!-- <view class="head_wrap">
			<view class="head_banner" style="margin-top: -40rpx;">
				<text class="head_banner_slogon">人人约拍-靠谱的约拍服务商</text>
				<view class="icon_list">
					<view class="icon_list_item" @tap="jump('/pages/album/index')">
						<view class="icon_list_item_imgview">
							<view class="wqvue-image icon_list_item_imgview_img">
								<image src="/static/h_14.png"></image>
							</view> 
						</view> 
						<view class="icon_list_item_title">作品相册</view>
					</view>
					<view class="icon_list_item" @tap="jump('/pages/space/index')">
						<view class="icon_list_item_imgview">
							<view class="wqvue-image icon_list_item_imgview_img">
								<image src="/static/h_12.png"></image>
							</view>
						</view> 
						<view class="icon_list_item_title">拍摄场地</view>
					</view>
					<view class="icon_list_item">
						<view class="icon_list_item_imgview">
							<view class="wqvue-image icon_list_item_imgview_img">
								<image src="/static/h_13.png"></image>
							</view>
						</view> 
						<view class="icon_list_item_title">防骗指南</view>
					</view>
				</view>
			</view> 
			<view class="head_bottom"></view>
		</view> -->
		<view class="main_content">
			<!-- <u-sticky :offset-top="menuButtonBottom" :enable="true" @fixed="tabFixed" @unfixed="tabUnFixed">
			<view class="tabs w-100 bg-white">
				<view class="d-flex justify-content-between align-items-center">
					<u-tabs class="tab-box" bg-color="#ffffff" :is-scroll="false" inactive-color="#999" name="name" :list="tabs" active-color="#616161" :current="current" @change="tabChange"></u-tabs>
					<view class="filtrate mr-20 text-color-grey" :class="filterCount>0?'filtrate-ing':''" @tap="filter">筛选{{filterCount>0?'·'+filterCount:''}}<u-icon class="ml-10" :name="filterIsShow?'arrow-up-fill':'arrow-down-fill'" size="20"></u-icon></view>
				</view>
				<view v-if="filterIsShow" class="bg-white w-100 filtrate-content" @touchmove.stop = "">
					<scroll-view class="filter-scroll" scroll-y="true">
						<view class="filter-item text-color-grey">
							<view class="mb-20 font-weight-bold">发起人性别</view>
							<view class="filter-tags">
								<view v-for="(item,index) in sexTags" :key="item.id" class="tag" :class="index==sexTagCurrent?'select':''" @tap="filterTagSex(index)">{{item.name}}</view>
							</view>
						</view>
						<view class="filter-item text-color-grey">
							<view class="mb-20 font-weight-bold">发起人身份</view>
							<view class="filter-tags">
								<view class="tag" :class="identityTagCurrent==0?'select':''" @tap="filterTagIdentity('all')">全部</view>
								<view class="tag" v-for="(item,index) in initialize.identityTags" :class="index+1==identityTagCurrent?'select':''" :key="item.id" @tap="filterTagIdentity(index)">{{item.label}}</view>
							</view>
						</view>
						<view class="filter-item text-color-grey">
							<view class="mb-20 font-weight-bold">发起人目的</view>
							<view class="filter-tags">
								<view class="tag" :class="purposeTagCurrent==0?'select':''" @tap="filterTagPurpose('all')">全部</view>
								<view class="tag" v-for="(item,index) in initialize.purposeTags" :class="index+1==purposeTagCurrent?'select':''" :key="item.id" @tap="filterTagPurpose(index)">{{item.label}}</view>
							</view>
						</view>
						<view class="filter-item text-color-grey">
							<view class="mb-20 font-weight-bold">费用模式</view>
							<view class="filter-tags">
									<view class="tag" :class="feeTagCurrent==0?'select':''" @tap="filterTagFee('all')">全部</view>
								<view class="tag" v-for="(item,index) in initialize.feeTags" :class="index+1==feeTagCurrent?'select':''" :key="item.id" @tap="filterTagFee(index)">{{item.label}}</view>
							</view>
						</view>
					</scroll-view>
					<view class="w-100 d-flex justify-content-between p-20">
						<button class="filter-clear mr-30" type="default" @tap="filterClear">清除</button>
						<button class="filter-confirm" type="primary" @tap="filterConfirm">确认</button>
					</view>
				</view>
			</view>
			</u-sticky> -->
			<u-sticky :offset-top="menuButtonBottom" :enable="true" bg-color="#f5f5f5">
				<view class="tabs w-100 bg-white">
					<view class="d-flex justify-content-between align-items-center">
						<u-tabs class="tab-box" bg-color="#ffffff" :is-scroll="false" inactive-color="#999" name="name" :list="tabs" active-color="#616161" :current="current" @change="tabChange"></u-tabs>
						<view class="filtrate mr-20 text-color-grey" :class="filterCount>0?'filtrate-ing':''" @tap="filter">筛选{{filterCount>0?'·'+filterCount:''}}<u-icon class="ml-10" :name="filterIsShow?'arrow-up-fill':'arrow-down-fill'" size="20"></u-icon></view>
					</view>
					<view v-if="filterIsShow" class="bg-white w-100 filtrate-content" @touchmove.stop = "">
						<scroll-view class="filter-scroll" scroll-y="true">
							<view class="filter-item text-color-grey">
								<view class="mb-20 font-weight-bold">拍摄类型</view>
								<view class="filter-tags">
									<view class="tag" :class="typeTagCurrent==0?'select':''" @tap="filterTagType('all')">全部</view>
									<view class="tag" v-for="(item,index) in typeTags" :class="index+1==typeTagCurrent?'select':''" :key="item.id" @tap="filterTagType(index)">{{item.label}}</view>
								</view>
							</view>
							<view class="filter-item text-color-grey">
								<view class="mb-20 font-weight-bold">种草渠道</view>
								<view class="filter-tags">
									<view class="tag" :class="platformTagCurrent==0?'select':''" @tap="filterTagPlatform('all')">全部</view>
									<view class="tag" v-for="(item,index) in platformTags" :class="index+1==platformTagCurrent?'select':''" :key="item.id" @tap="filterTagPlatform(index)">{{item.label}}</view>
								</view>
							</view>
							<view class="filter-item text-color-grey">
								<view class="mb-20 font-weight-bold">商品类目</view>
								<view class="filter-tags">
									<view class="tag" :class="categoryTagCurrent==0?'select':''" @tap="filterTagCategory('all')">全部</view>
									<view class="tag" v-for="(item,index) in initialize.goodsCategory" :class="index+1==categoryTagCurrent?'select':''" :key="item.id" @tap="filterTagCategory(index)">{{item.label}}</view>
								</view>
							</view>
						</scroll-view>
						<view class="w-100 d-flex justify-content-between p-20">
							<button class="filter-clear mr-30" type="default" @tap="filterClear">清除</button>
							<button class="filter-confirm" type="primary" @tap="filterConfirm">确认</button>
						</view>
					</view>
				</view>
			</u-sticky>
			<view class="main_content_body p-20" :style="'min-height:'+minContentBodyHeight+'rpx;'">
				<!-- <fuzzy-location ref="fuzzyLocation" v-if="current==3" :currentCity="currentCity" @over="locationOver" @change="changeCity"></fuzzy-location>
				<post-list type='shoot' :list="shootLists" :loadStatus="loadStatus"></post-list> -->
				<fuzzy-location ref="fuzzyLocation" v-if="current==3" :currentCity="currentCity" @over="locationOver" @change="changeCity"></fuzzy-location>
				<!-- 任务列表 begin -->
				<post-task-list :list="taskLists" :loadStatus="loadStatus"></post-task-list>
				<!-- 任务列表 end -->
			</view>
		</view>	
		
		<!-- 遮照层 -->
		<view v-if="filterIsShow" class="popup-bg" catchtouchmove="true"></view>
		
		<!-- tabbar -->
		<q-tabbar :active="0" :count="msgCount"></q-tabbar>
	</view>
</template>

<script>
import {mapState, mapMutations } from 'vuex'
import navBar from '../../components/nav-bar/nav-bar.vue'
import postTaskList from '../../components/post-task-list/post-task-list.vue';
import fuzzyLocation from '../../components/location/fuzzy-location.vue';
export default {
	components: {
		navBar,
		postTaskList,
		fuzzyLocation
	},
	data() {
		return {
			tabs: [{name: '全部',value:0},{name: '买家秀',value:1},{name: '种草',value:2},{name: '同城探店',value:3}],
			typeTags : [{label:'赠拍',value:'1'},{label:'寄拍',value:'2'}],
			platformTags : [{label:'小红书',value:'1'},{label:'朋友圈',value:'2'},{label:'抖音',value:'3'},{label:'微博',value:'4'},{label:'快手',value:'5'},{label:'美团',value:'6'},{label:'饿了嘛',value:'7'}],
			taskLists: [],
			menuButtonBottom:'',
			minContentBodyHeight:'',
			scrollTop:'',
			isTabFixed:false,
			filterIsShow:false,
			filterCount:0,
			typeTagCurrent:0,
			platformTagCurrent:0,
			categoryTagCurrent:0,
			filterCount:0,
			isTabFixed:false,
			citySelectChange:false,
			selectCityVal:'',
			loadStatus: 'loading',
			current: 0,
			page: 1,
		};
	},
	computed:{
		...mapState(['initialize', 'currentCity'])
	},
	onReady() {
		let that = this;
		uni.getSystemInfo({
		      success: (res) => {
				  that.rate = 750/res.windowWidth;
				//#ifndef H5
				// 胶囊按钮位置信息
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				this.menuButtonBottom = menuButtonInfo.bottom*that.rate;
				// #endif
				
				// 可使用窗口高度，将px转换rpx
				that.minContentBodyHeight = (res.windowHeight * that.rate)-this.menuButtonBottom-74

				uni.createSelectorQuery().select('.main_content').boundingClientRect(res => {
					that.scrollTop = res.top;
				}).exec()
				
				that.getTaskList();
		      }
		})
	},
	onReachBottom() {
		if(this.loadStatus!='nomore') {
			this.page++;
			this.loadStatus = 'loading'
			this.getTaskList(this.current);
		}
	},
	onPullDownRefresh() {
		// this.getLinkList();
		// this.getHotTopic();
		// this.getClassList();
		// this.page = 1;
		// this.topicList = [];
		// this.getTopicList();
		// uni.stopPullDownRefresh();
	},
	methods: {
		tabChange(index) {
			if(index!=this.current&&this.loadStatus!='loading') {
				this.f_scrollTop();
				this.current = index;
				this.taskLists = [];
				this.page = 1;
				
				if(index==3) {
					if(!this.currentCity.value) {
						this.$nextTick(()=>{
							this.$refs.fuzzyLocation.getFuzzyLocation();
						})
					}else{
						this.getTaskList();
					}
				}else{
					this.getTaskList();
				}
			}
		},
		async getTaskList() {
			let params = {page:this.page,tab:this.tabs[this.current].value,currentCity:this.currentCity.value,selectCity:this.selectCityVal}
			if(this.filterCount>0){
				if(this.typeTagCurrent>0) {
					params.type = this.typeTags[this.typeTagCurrent].value
				}
				if(this.platformTagCurrent>0) {
					params.platform = this.platformTags[this.platformTagCurrent-1].value
				}
				
				if(this.catrgoryTagCurrent>0) {
					params.catrgory = this.catrgoryTags[this.catrgoryTagCurrent-1].value
				}
			}
			
			this.loadStatus = 'loading';
			let res = await this.$api('task')
			this.taskLists = this.taskLists.concat(res.data.list);
			if (this.page === res.data.total_pages || res.data.total_pages === 0) {
				this.loadStatus = 'nomore';
			} else {
				this.loadStatus = 'loadmore';
			}
		},
		filter() {
			if(this.loadStatus!='loading') {
				this.filterIsShow = !this.filterIsShow;
				this.f_scrollTop();
			}
		},
		filterTagType(current) {
			if(current=='all') current=-1
			this.typeTagCurrent = current+1;
		},
		filterTagPlatform(current) {
			if(current=='all') current=-1
			this.platformTagCurrent = current+1;
		},
		filterTagCategory(current) {
			if(current=='all') current=-1
			this.categoryTagCurrent = current+1;
		},
		filterClear() {
			this.typeTagCurrent = 0;
			this.platformTagCurrent = 0;
			this.categoryTagCurrent = 0;
			this.filterCount = 0;
			this.filterIsShow = false;
			if(this.loadStatus!='loading') {				
				this.taskLists = [];
				this.page = 1;
				this.loadStatus = 'loading'
				this.f_scrollTop();
				this.getTaskList();
			}
		},
		filterConfirm() {
			this.filterCount = 0;
			this.filterIsShow = false;
			if(this.typeTagCurrent) this.filterCount++;
			if(this.platformTagCurrent) this.filterCount++
			if(this.categoryTagCurrent) this.filterCount++
			if(this.loadStatus!='loading') {
				this.taskLists = [];
				this.page = 1;
				this.loadStatus = 'loading'
				this.f_scrollTop();
				this.getTaskList();
			}
		},
		tabFixed() {
			this.isTabFixed = true;
		},
		tabUnFixed() {
			this.isTabFixed = false;
			this.filterIsShow = false;
		},
		locationOver() {
			this.taskLists = [];
			this.page = 1;
			this.f_scrollTop();
			this.getTaskList();
		},
		changeCity(val) {
			if(this.selectCityVal!=val) {
				this.selectCityVal = val;
				this.page = 1;
				this.loadStatus = 'loading';
				this.taskLists = [];
				this.f_scrollTop();
				this.getTaskList();
			}
		},
		gridJump(index) {
			let url = ['/pages/shoot/index', '/pages/album/index', '/pages/space/index'];
			if(index==3) {
				this.$u.toast("暂未开放，敬请期待！");return;
			}else if(index==0) {
				uni.switchTab({url:url[index]})
			}else {
				uni.navigateTo({url:url[index]})
			}
		},
		f_scrollTop() {
			if(!this.isTabFixed) {
				uni.pageScrollTo({
				   scrollTop: this.scrollTop,
				   duration: 100
				})
			}
		}
	}
};
</script>
<style lang="scss" scoped>
page {
	background-color: #f5f5f5;
}
.wrap {
    font-size: 28rpx;
}
.head_wrap {
    position: relative;
    z-index: 9;
	background-color: #FFFFFF;
}
.ad-swiper {
	height: 250rpx;
	margin: 20rpx;
}
.head_banner {
    height: 200rpx;
    padding: 0 30rpx;
}
.head_banner_slogon {
    display: inline-block;
    font-size: 20rpx;
    color: #fff9ee;
    line-height: 30rpx;
    text-align: center;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 16rpx 0;
    position: relative;
}
.search_bar {
    height: 60rpx;
    background: #fff;
    border-radius: 8rpx;
    padding-left: 70rpx;
    position: relative;
}
.search_bar:before {
    content: "";
    height: 30rpx;
    width: 30rpx;
    background: url() 0 0/15px 15px no-repeat;
    position: absolute;
    left: 28rpx;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.search_bar_txt {
    height: 60rpx;
    font-size: 28rpx;
    line-height: 60rpx;
    color: #999;
}

.block-wrap {
	background-color: #fff;
	border-radius: 20rpx;
	margin: 20rpx;
	padding: 20rpx;
	overflow: hidden;
}
.gn-icon {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 10rpx;
}

.filtrate {
	background-color: #F1F1F1;
	padding: 10rpx 20rpx;
	border-radius: 10rpx;
}
.filtrate-ing {
	background-color: rgba(238,209,70, 0.6);
}
.filtrate-content {
	position: absolute;
	z-index:99;
}
.filter-scroll {
	height: calc(100vh - 600rpx)
}
.filter-item {
	border-bottom: 2rpx solid #F5F5F5;
	padding: 30rpx 30rpx;
}
.filter-clear {
	width: 30%;
}
.filter-confirm {
	width: 70%;
}

.main_content {
	background: #f7f7f7;
	margin-top: -2rpx;
}
.tabs {
	position: relative;
	z-index: 99;
	padding: 10rpx 0;
}
.tab-box {
	width: 70%;
}
.menu {
	padding: 18rpx 30rpx;
	display: flex;
	align-items: center;
	font-size: $font-size-base;
	color: $text-color-grey;
	
	.item {
		padding: 14rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
		
		&.active {
			color: $color-primary;
			background-color: $bg-color-white;
		}
	}
	.item.selected {
		border: 2rpx solid #EED146;
		background-color: rgba(239, 210, 52,0.3);
	}
	
	.filter-item {
		text-align: center;
		padding: 14rpx 0;
	}
}
.popup-bg{
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      bottom: 0;
      background-color: rgba(1,1,1,0.3);
}
.filter-tags .tag {
	width: 150rpx;
	position: relative;
	display: inline-block;
	padding: 10rpx 0;
	color: #666;
	font-size: 28rpx;
	text-align: center;
	border-radius: 10rpx;
	background-color: #F1F1F1;
	margin-bottom: 20rpx;
	margin-right: 20rpx;
}
.filter-tags .tag.select {
	background-color: rgb(239, 210, 52);
}
</style>
<style lang="scss" scoped>
</style>
